/**
 * 可浏览的输入框
 */
import React, { forwardRef } from 'react';
import { Input } from 'antd';
import cls from 'classnames';
import styles from './index.less';

const noop = () => {};
const BrowsableInput = ({ value, className, style, onChange = noop, browsing, ...rest }, ref) => (
    <div className={cls(styles.root, className)} style={style}>
        {!browsing ? (
            <Input
                value={value}
                onChange={e => {
                    onChange(e.target.value);
                }}
                maxLength={200}
                {...rest}
                ref={ref}
            />
        ) : (
            <span title={value} className={styles.browsing} {...rest} ref={ref}>
                {value}
            </span>
        )}
    </div>
);
export default forwardRef(BrowsableInput);
